* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,
li {
    list-style: none;
}

.zp-k {
    height: 100vh;
    background: radial-gradient(circle, #eee, #999);

    .zp {
        display: grid;
        width: 680px;
        margin: 100px auto;
        gap: 20px;
        grid-template: repeat(3, 200px) / repeat(3, 200px);
        background: #ff7d51;
        padding: 20px;

        img {
            width: 100%;
            height: 100%;
        }

        .btn {
            background: linear-gradient(to bottom, #ffe68c, #ffc52c);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            color: #e72427;
            letter-spacing: 10px;
            flex-wrap: wrap;
            padding: 50px;
            cursor: pointer;
            user-select: none;
        }

        li {
            position: relative;
            font-size: 0;
        }

        .back::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(255, 255, 0, 0.3);
            z-index: 10;
            border-radius: 20px;
        }
    }
}

.box1 {
    margin: 20px auto;
    width: 320px;
    height: 300px;
    border: 1px solid #898989;
    text-align: center;

    img {
        width: 310px;
        height: 220px;
        margin-top: 40px;
    }
}

.box1_1 {
    margin: 20px auto;
    width: 320px;
    height: 300px;
    border: 1px solid #898989;
    text-align: center;

    img {
        width: 310px;
        height: 220px;
        margin-top: 40px;
    }
}

.box1_2 {
    margin: 20px auto;
    width: 320px;
    height: 300px;
    border: 1px solid #898989;
    text-align: center;

    img {
        width: 310px;
        height: 220px;
        margin-top: 40px;
    }
}

.box2 {
    border: 1px solid #898989;
    width: 50px;
    height: 50px;
    margin: 0 0 0 41%;
    text-align: center;

    img {
        width: 40px;
        height: 40px;
        margin-top: 5px;
    }
}

.box2_1 {
    border: 1px solid #898989;
    width: 50px;
    height: 50px;
    margin: -52px 0 0 48%;
    text-align: center;

    img {
        width: 40px;
        height: 40px;
        margin-top: 5px;
    }
}

.box2_2 {
    border: 1px solid #898989;
    width: 50px;
    height: 50px;
    margin: -52px 0 0 55%;
    text-align: center;

    img {
        width: 40px;
        height: 40px;
        margin-top: 5px;
    }
}